<template>
	<section>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="角色名称">
				<el-input v-model="formInline.role_name" placeholder="角色名称"></el-input>
			</el-form-item>
			<el-form-item label="角色状态">
				<el-select v-model="formInline.status" placeholder="角色状态">
					<el-option label="全部" value=""></el-option>
					<el-option label="启用" value="1"></el-option>
					<el-option label="禁用" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item >
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="primary" @click="toAdd">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" border style="width: 100%" v-loading="searchLogining" height="500">
			<el-table-column fixed prop="id" label="ID" width="150"></el-table-column>
			<el-table-column prop="role_name" label="角色名称" width="250"></el-table-column>
			<el-table-column prop="status" label="状态" width="250">
				<template slot-scope="scope">
					<el-switch
                        v-model="scope.row.status"
                        active-value="1"
                        inactive-value="2"
                        disabled>
                	</el-switch>
				</template>
			</el-table-column>

			<el-table-column prop="add_time" label="添加时间" style="min-width: 250px;"> </el-table-column>

			<el-table-column fixed="right" label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="toAuth(scope.row)">授权</el-button>
					<el-button type="primary" size="small" @click="toEdit(scope.row, scope.$index)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			@current-change="handleCurrentChange"
            @size-change="handleSizeChange"
			:total="page.total"
			:page-size="page.size"
			:page-sizes="[10, 50, 100, 200]"
			:current-page="page.current_page"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<!-- 隐藏的添加角色表单 -->
		<el-dialog :title="form_title" :visible.sync="dialogFormVisible">
			<el-form :model="form"  :rules="rules" ref="ruleForm"  v-loading="addeditLoading">
				<el-form-item label="角色名称" label-width="80px" prop="role_name">
					<el-input v-model="form.role_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色状态" label-width="80px">
					<el-switch
                        v-model="form.status"
                        active-value="1"
                        inactive-value="2">
                	</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitAddEdit('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="授权" :visible.sync="isShowAuthDialog" width="500px">
			<!-- v-if主要是为了防止第一次加载之后不再重新加载，这边判断显示后直接重新载入 -->
            <components is="auth" v-if="isShowAuthDialog"  :role_id="role.role_id" @closeAuthDialog="closeAuthDialog"></components>
        </el-dialog>

	</section>
</template>

<script>
import auth from './auth.vue'
export default {
	data() {
	     return {
	     	dialogFormVisible:false,
	     	form_title:"添加角色",
	     	form_type:1,
	     	edit_index:0,
	     	form:{
	     		id:'',
	     		role_name:'',
	     		status:"1",
	     	},
	     	page:{
	     		total:0,
	     		size:10,
	     		current_page:1
	     	},
	      	formInline: {
	          	role_name: '',
	          	status: ''
	        },
	        tableData: [],
	        searchLogining:false,
	        addeditLoading:false,
	        rules: {
				role_name: [ { required: true, message: '请输入角色名称', trigger: 'blur' }, ]
		    },
		    isShowAuthDialog:false,
		    role:{
		    	role_id:0
		    }
	    }
    },components:{
        auth
    },methods: {
    	handleCurrentChange(page){
    		this.page.current_page = page;
    		this.getList();
    	},handleSizeChange(size){
    		this.page.size = size;
    		this.getList();
    	},onSubmit(){
        	this.getList();
      	},toAuth(row){
      		this.role.role_id = row.id;
      		this.isShowAuthDialog = true;
      		console.log("授权");
      	},closeAuthDialog(){
      		this.isShowAuthDialog = false;
      	},toEdit(row, index){
      		this.edit_index = index;
      		// console.log(index)
      		this.form.id = row.id;
      		this.form.role_name = row.role_name;
      		this.form.status = row.status;
      		//弹出编辑框按钮
      		this.dialogFormVisible = true;
      		this.form_title = "编辑角色";
      		this.form_type = 2; //编辑
      	},toAdd(){
      		//弹出添加按钮
      		//初始化form值
      		this.form = { id:'', role_name:'', status:"1" }
      		this.dialogFormVisible = true;
      		this.form_title = "添加角色";
      		this.form_type = 1; //添加
      	},submitAddEdit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					
		      		//提交
		      		if(this.form_type==2){
		      			var url = '/admin/role/edit';
		      		}else{
		      			var url = '/admin/role/add';
		      		}
		            var token = this.Common.cookie('token');
		            var data = this.form;
		            data.token = token;
		            var tar = this;
		            tar.addeditLoading = true;
					tar.Common.request(url, data, function(data){
			        	tar.addeditLoading = false;
			        	tar.dialogFormVisible = false;
			        	if(data.success_code==0){
			        		tar.$message({
								title: '警告',
								message: data.message,
								type: 'error'
							});
			        	}else{
			        		tar.$message({
								title: '成功',
								message: data.message,
								type: 'success'
							});
			        		if(tar.form_type==1){
			        			tar.tableData.unshift(data.result);
			        		}else{
			        			tar.tableData[tar.edit_index].role_name = data.result.role_name;
			        			tar.tableData[tar.edit_index].status = data.result.status;
			        		}
			        	}
			        },function(data){
			        	var message = '接口请求失败';
			        	if(data.message){
			        		message = data.message;
			        	}
			        	tar.addeditLoading = false;
			        	tar.dialogFormVisible = false;
						tar.$message({
							title: '警告',
							message: message,
							type: 'error'
						});
			        },this);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
      	},getList(){
			var url = '/admin/role/getLists';
            var token = this.Common.cookie('token');
            var data = this.formInline;
            data.token = token;
            data.size = this.page.size;
            data.page = this.page.current_page;
            var tar = this;
            tar.searchLogining = true;
			tar.Common.request(url, data, function(data){
	        	tar.searchLogining = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		tar.tableData = data.result.data;
	        		tar.page.total = data.result.total;
	        		tar.page.current_page = data.result.current_page;
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.searchLogining = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		}
    },mounted(){
		//获取用户信息
		this.getList();
	}
}
</script>